<div class="shoppingCart_body">
    <div class="shoppingCart_info">
        <!-- 头部 -->
        <div class="info_top">
            <div class="top_qx">
                <div class="checkbox_qx"></div>
                <span>全选</span>
            </div>
            <div class="top_spxx">商品信息</div>
            <div class="top_dj">单价</div>
            <div class="top_sl">数量</div>
            <div class="top_xj">小计</div>
            <div class="top_cz">操作</div>
        </div>
        <!-- 商品内容 -->
        <div id="info_box">
            <div class="info_shopping">
                <div class="info_shopping_box">
                    <div class="shopping_box_lef">
                        <div>
                            <input type="checkbox" name="" id="">
                        </div>
                        <a href="">
                            <img src="https://pic.flyco.net.cn/mall/goods/FR5252/main/1_1598506241104.jpg" alt="">
                        </a>
                        <div class="box_lef_info">
                            <a href="">飞科毛球修剪器FR5252</a>
                            <span>剃粘两用 / 1小时快充 / Type-C充电</span>
                        </div>
                    </div>
                    <div class="shopping_box_price">
                        <h3>￥</h3>
                        <strong>59.00</strong>
                    </div>
                    <div class="shopping_box_count">
                        <div class="box_count_box">
                            <span class="count_lef">-</span>
                            <span class="count_rig">+</span>
                            <input class="coun_cen" type="text" value="1">
                        </div>
                        
                    </div>
                    <div class="shopping_box_price">
                        ￥118.00 
                    </div>
                    <div class="shopping_box_delete">
                        删除
                    </div>
                </div>
            </div>
        </div>
        <!-- 结算 -->
        <div class="info_shopping_account">
            <div class="shopping_account_lef">
                <div class="checkbox_qx"></div>
                <span>全选</span>
            </div>
            <div class="shopping_account_rig">
                <span>应付金额</span>
                <span>
                    <h3>￥</h3>
                    <strong id="total">0</strong>
                </span>
                <div class="account">
                    <span>结算</span>
                    <span id="index">（0）</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        // 获取本地存储数据
         var cart = JSON.parse(localStorage.getItem("cart"))
        
        //  声明空的字符串
          var html = "";
        //   循环遍历生成商品页面
         for (const key in cart) {
            html += `<div class="info_shopping_box">
                        <div class="shopping_box_lef">
                            <div class="input" data-id ="${key}">
                            </div>
                            <a href="">
                                <img src="${cart[key].pic}" alt="">
                            </a>
                            <div class="box_lef_info">
                                <a href="">${cart[key].name}</a>
                                <span>${cart[key].subTitle}</span>
                            </div>
                        </div>
                        <div class="shopping_box_price">
                            <h3>￥</h3>
                            <strong class = "2${key}">${cart[key].promotionPrice}</strong>
                        </div>
                        <div class="shopping_box_count">
                            <div class="box_count_box">
                                <span class="count_lef" data-id = "${key}">-</span>
                                <span class="count_rig" data-id = "${key}">+</span>
                                <input class="coun_cen ${key}" type="text" value="${cart[key].cunm}">
                            </div>
                            
                        </div>
                        <div class="shopping_box_price">
                            <span>￥ </span>
                            <strong id = "xiaoji" class = "1${key}"> ${(cart[key].cunm * cart[key].promotionPrice).toFixed(2) }</strong>
                             
                        </div>
                        <div class="shopping_box_delete" data-id="${key}">
                            删除
                        </div>
                    </div>`

         }
        //  渲染页面
         $(".info_shopping").html(html)

        //  点击删除  的点击事件
         $(".info_shopping").on("click",".shopping_box_delete",function () {
            //    删除对象里的数据
            delete cart[$(this).attr("data-id")]
            //    上传删除后的数据
            localStorage.setItem("cart", JSON.stringify(cart))
            //    删除商品盒子
                $($(this).parent()).remove()
                // 回调函数 传入 商品型号  复选框
            hdzh()
            // 异步问题 提示框
            $(function () {
                alert("删除商品成功")
            })
            
         })
        //  复选框点击
        $(".input").click(function () {
            // 给当前元素加class名
            $(this).toggleClass("input_xz")
             // 如果商品复选框不等于选中数量 全选取消
            if (!($(".input").length===$(".input_xz").length)) {
                $(".checkbox_qx").removeClass("qx_xuanz")
            }
            hdzh()
        })
        // 回调函数
        function hdzh() {
            var $xiaoji =  $(".input_xz").parents(".info_shopping_box").children(".shopping_box_price").children("#xiaoji")
            var zongji = 0;
            for (const key in $xiaoji) {
                if (!isNaN($xiaoji[key])) {
                    break;
                }
                zongji += Number($($xiaoji[key]).html())
            }
            $("#total").html(zongji)
        }
       // 数量 --  
        $(".count_lef").click(function () {
            // 获取商品代码
            var index = $(this).attr("data-id");
            // 获取本地存取数据
            var arrr = JSON.parse(localStorage.getItem("cart"));
            // 数量-1
            arrr[index].cunm --;
            // 数量不能小于1
            if (arrr[index].cunm<=1) {
                arrr[index].cunm = 1
            }
            // 改变数量
            $("."+index).val(arrr[index].cunm);
            // 改变小计金额
            $(".1"+index).html((arrr[index].cunm*arrr[index].promotionPrice).toFixed(2))
            // 上传改变的数据
            localStorage.setItem("cart", JSON.stringify(arrr));
            // 回调函数改变综合金额
            hdzh();
        })
        // 数量++
        $(".count_rig").click(function () {
            // 获取商品代码
            var index = $(this).attr("data-id");
            // 获取本地存取数据
            var arrrt = JSON.parse(localStorage.getItem("cart"));
            // 数量+1
            arrrt[index].cunm ++ ;
            // 改变数量
            $("."+index).val(arrrt[index].cunm);
            // 改变小计金额
            $(".1"+index).html( (arrrt[index].cunm*arrrt[index].promotionPrice).toFixed(2))
            // 上传改变的数据
            localStorage.setItem("cart", JSON.stringify(arrrt));
            // 回调函数改变综合金额
            hdzh();
            
        })
        // 全选
        $(".checkbox_qx").click(function () {
            // 给全选框加class名
            $(".checkbox_qx").toggleClass("qx_xuanz")
            // 判断全选是否选中
            if ($(".qx_xuanz").length===0) {
                    $(".input").removeClass("input_xz")
            }else{
                // 给商品复选框加class名
                $(".input").addClass("input_xz")
            }
             hdzh()
            
        })
    })
  
</script>